<template>
  <el-dialog v-model="dialog.visible"
             :title="dialog.title"
             v-loading="dialog.loading"
             :close-on-click-modal="false"
             width="80%">
    <el-container>
      <el-aside width="300px">
        <basic-container>
          <el-divider content-position="center">流程节点</el-divider>
          <el-tree ref="taskTree"
                   default-expand-all
                   :expand-on-click-node="false"
                   :data="processTree"
                   nodeKey="defKey"
                   :props="{label:'defName'}"
                   :highlight-current="true"
                   @node-click="taskNodeClick">
          </el-tree>
        </basic-container>
      </el-aside>

      <el-main class="margin-left">
        <basic-container>
          <el-divider content-position="center">功能配置</el-divider>
          <el-tabs v-model="categoryPaneCode">
            <el-tab-pane v-for="(category) in listCategoryDetail" :label="category.categoryName"
                         :name="category.categoryCode"/>
          </el-tabs>
          <el-table :data="dataSource">
            <el-table-column label="名称" prop="funName"></el-table-column>
            <el-table-column label="配置" prop="config">
              <template #="{row}">
                <el-input v-if="row.funConfUiType==='input'"
                          v-model="currentNodeConf[row.funCode]"></el-input>
                <el-input v-else-if="row.funConfUiType==='textarea'"
                          type="textarea"
                          v-model="currentNodeConf[row.funCode]"></el-input>
                <avue-radio v-else-if="row.funConfUiType==='radio'"
                            :dic="row.dicData"
                            v-model="currentNodeConf[row.funCode]"></avue-radio>
                <avue-checkbox v-else-if="row.funConfUiType==='checkbox'"
                               :dic="row.dicData"
                               v-model="currentNodeConf[row.funCode]"></avue-checkbox>
                <avue-select v-else-if="row.funConfUiType==='select'"
                             :dic="row.dicData"
                             v-model="currentNodeConf[row.funCode]"></avue-select>
              </template>
            </el-table-column>
            <el-table-column label="描述" prop="funDescription">
              <template #default="{row}">
                <div class="text-auto-line">{{ row.funDescription }}</div>
              </template>
            </el-table-column>

          </el-table>

        </basic-container>

      </el-main>


    </el-container>
    <template #footer>
      <div class="dialog-footer ">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import actModelApi from "@/api/start/activiti/actModelApi";
import EditModelFormProp from "@/views/start/activiti/model/editModelFormProp.vue";
import BasicContainer from "components/basic-container/main.vue";
import TreeUtils from "utils/treeUtils";


export default {
  name: "editDeployProcFunConfDialog",
  components: {BasicContainer, EditModelFormProp},
  computed: {

    dataSource() {
      if (!this.categoryPaneCode) {
        return []
      }
      let category = this.listCategoryDetail.find(e => e.categoryCode === this.categoryPaneCode)

      if (!category || !category.funDefList) {
        return []
      }
      let funDefList = category.funDefList

      if (!this.selectProcessNode) {
        return funDefList
      }
      funDefList = funDefList.filter(e => e.procElementType === this.selectProcessNode.elementType)

      return funDefList
    }
  },
  data() {
    return {
      dialog: {
        visible: false,
        title: "",
        loading: false,
      },
      categoryPaneCode: null,
      listCategoryDetail: [],
      currentNodeConf: {},
      srcDeployProcFunConfMap: {},
      processTree: [],
      selectProcessNode: null,
      deployDef: null,

    }
  },
  created() {

  },
  methods: {
    show(deployDef) {
      this.deployDef = deployDef;
      this.dialog.title = "流程【" + deployDef.defName + "】版本v" + deployDef.defVersion + "功能配置"
      this.dialog.loading = true
      actModelApi.getModelTasksByDeployId(deployDef.id).then(res => {
        let tasks = res.data.data || [];
        let root = {}
        root.defKey = deployDef.defKey
        root.defName = deployDef.defName
        root.elementType = "process"
        root.children = tasks;
        this.processTree = [root]
        return actModelApi.listGlobalActFunDefCategoryDetail()
      }).then(res => {
        let data = res.data.data || []
        if (data.length > 0) {
          this.categoryPaneCode = data[0].categoryCode
        }
        this.listCategoryDetail = data;
        return actModelApi.getProcFunConfigByDeployDefId(deployDef.id)
      }).then(res => {
        let data = res.data.data || {}
        this.srcDeployProcFunConfMap = data;
        this.dialog.visible = true
        this.dialog.loading = false
      }).finally()

    },
    taskNodeClick(node) {
      this.selectProcessNode = node;
      let conf = this.srcDeployProcFunConfMap[node.defKey]
      if (conf === undefined || conf === null) {
        conf = {}
        this.srcDeployProcFunConfMap[node.defKey] = conf
      }
      for (const fun of this.dataSource) {
        if (conf[fun.funCode] === null || conf[fun.funCode] === undefined) {
          conf[fun.funCode] = fun.funDefVal
        }
      }
      this.currentNodeConf = conf
    },

    save() {
      this.dialog.loading = true
      let nodes = TreeUtils.treeToList(this.processTree);
      let funDefList = TreeUtils.treeToList(this.listCategoryDetail, "funDefList", (item) => {
        return true !== item.disabled;
      })
      let submitData = []
      let nodeConf;
      let dataItem
      for (let node of nodes) {
        nodeConf = this.srcDeployProcFunConfMap[node.defKey] || {}
        for (const funDef of funDefList) {

          if (nodeConf[funDef.funCode] === null || nodeConf[funDef.funCode] === undefined) {
            continue
          }
          dataItem = {}
          dataItem.confKey = funDef.funCode;
          dataItem.confVal = nodeConf[funDef.funCode];
          dataItem.actDefKey = node.defKey;
          submitData.push(dataItem)
        }
      }
      actModelApi.saveProcFunDefConfVals(this.deployDef.id, submitData).then(res => {
        this.$message.success("保存成功")
        this.close()
      }).catch(err => {

      }).finally(() => this.dialog.loading = false)

    },
    close() {
      this.dialog.visible = false
      this.dialog.title = ''
      this.currentNodeConf = {}
      this.categoryPaneCode = null
      this.listCategoryDetail = []
      this.currentNodeConf = {}
      this.srcDeployProcFunConfMap = {}
      this.processTree = []
      this.selectProcessNode = null
    }

  }
}
</script>
<style scoped>

</style>